<template>
  <div class="nav-bar" v-if="items">
    <div v-for="(item, index) in items" :key="index" class="nav-bar-item" :class="{ active: activeIndex === index }"
      @click="handleItemClick(item.path, index)">
      <span>{{ item.name }}</span>
      <div v-if="activeIndex === index" class="underline"></div>
    </div>
    <van-search v-model="value" :placeholder="placeholder" background="transparent" shape="round" @click="gotoSearch" />
  </div>
</template>

<script setup>
import { getHotSearch } from "@/api/index.js"
import { onMounted, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'; // 引入 useRoute
import { useStore } from "@/stores/index.js";

const router = useRouter();
const route = useRoute(); // 获取当前路由信息
const store = useStore();

const props = defineProps({
  scrollOpacity: {
    type: Number,
    default: 1,
  },
});


const items = [
  { name: '推荐', path: '/' },
  { name: '榜单', path: '/billboard' },
  { name: '分类', path: '/category' }
];

const placeholder = ref('');

onMounted(async () => {
  if (route.path === '/') {
    store.setNavBarActive(0);
  } else if (route.path === '/billboard') {
    store.setNavBarActive(1);

  } else if (route.path === '/category') {
    store.setNavBarActive(2);
  }

  //热门搜索  获取热门搜索第一个关键词
  const res = await getHotSearch()
  placeholder.value = res.data.list[0].title
})

const activeIndex = computed(() => store.navBarActive);
const value = ref('');

// 确保 scrollOpacity 是一个数字
const safeScrollOpacity = computed(() => {
  return typeof props.scrollOpacity === 'number' ? props.scrollOpacity : parseFloat(props.scrollOpacity) || 0;
});

// 动态计算背景颜色
const backgroundColor = computed(() => {
  const opacity = safeScrollOpacity.value.toFixed(2); // 保留两位小数
  return `rgba(255, 255, 255, ${opacity})`; // 白色背景，透明度由 scrollOpacity 控制
});

// 动态计算文字颜色（从白色到黑色渐变）
const textColor = computed(() => {
  if (route.path === '/billboard' || route.path === '/category') {
    return 'rgba(0, 0, 0, 1)'; // 当前路由为 /billboard 或 /category 时，文字颜色为黑色
  }
  const whiteOpacity = (1 - safeScrollOpacity.value).toFixed(2); // 白色透明度逐渐减少
  const blackOpacity = safeScrollOpacity.value.toFixed(2); // 黑色透明度逐渐增加
  return `rgba(${255 * whiteOpacity}, ${255 * whiteOpacity}, ${255 * whiteOpacity}, 1)`; // 白色到黑色渐变
});

// 动态计算激活状态下下划线颜色（白色或红色）
const underlineColor = computed(() => {
  if ((route.path === '/billboard' || route.path === '/category') && activeIndex.value !== null) {
    return 'rgba(255, 0, 0, 1)'; // 当前路由为 /billboard 或 /category 时，下划线颜色为红色
  }
  return safeScrollOpacity.value < 0.5 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 0, 0, 1)';
});


const gotoSearch = () => {
  //前往搜索页面
  router.push({ path: '/search' });
}


// 处理点击事件
function handleItemClick (path, index) {
  store.setNavBarActive(index);
  router.push({ path });
}
</script>

<style scoped>
.nav-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr;
  grid-gap: 10px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: v-bind(backgroundColor);
  height: 50px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  z-index: 1000;
  padding: 0 10px;
  box-sizing: border-box;
}

.nav-bar-item {
  position: relative;
  cursor: pointer;
  font-size: 13px;
  transition: font-size 0.3s ease, color 0.3s ease;
  color: v-bind(textColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-bar-item.active {
  font-size: 16px;
  font-weight: bold;
}

.nav-bar-item span {
  position: relative;
  z-index: 1;
}

.nav-bar-item .underline {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: v-bind(underlineColor);
  transition: background-color 0.3s ease;
  opacity: 1;
}

.nav-bar-item:not(.active) .underline {
  opacity: 0;
}
</style>
